﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

  <link rel="stylesheet" href="/Content/Gallery_files/portfolio_gallery.css" type="text/css">
    <link rel="stylesheet" href="/Content/Gallery_files/tzportfolio.css" type="text/css">
<style type="text/css">
.ib-main a{
                width: 256px;
                height: 256px;
            }
        
.container-fluid { max-width: 1500px!important; }
.item-page .TzArticleMedia img{
width:100%;
}
html,body, h4, h4 a, h3, .nav > li > a, .TzArticleTitle, li.price span, .sidebar-nav h3, h3.TzBlogTitle, h3.TzPortfolioTitle, h4.showbiz-title, h3.contact-title, h3.header, h4.tz_new_grid_title, .box h3, .tz-spotlight .tztwd-tweet, h3.TzArticleAuthorTitle,  h3.TzRelatedTitle, .TzRelated ul li a { font-family: ralewayregular, Arial, sans-serif; }

 .btn, li.head, li.price, .tzDetailContent h4, .tabs-left > .nav-tabs > li > a, .table th, .accordion-heading a, .caption-title, h1, h2, h3, h4, h5, .info_slide .tz_title_slide a, h3.slide-title, .nivo-caption a { font-family: ralewaysemibold, Arial, sans-serif; }

.TzPortfolioIntrotext, .TzDescription, .tztwd-tweet, module-color .box .content, .TzArticleDescription p, .introtext p, .item-page ul li { font-family: libre_baskervilleregular, Arial, sans-serif; }

div.TzInnerQuote, .TzQuote .text, .TzQuote, .tztwd-tweet-data, .testimonial-content  { font-family: libre_baskervilleitalic, Arial, sans-serif; }

.tzDetailContent h2 { font-family: libre_baskervillebold, Arial, sans-serif; }

.TzNewReadmoreLink a, h3.TzPortfolioTitleFeatured a, .TzDate span,  .breadcrumb li, a.twitter-follow, .TzBlog .date-group h3,   h1.TzTagHeading { font-family: ralewaylight, Arial, sans-serif; }

.plazart-mainnav .navbar .nav > li.active > a:before,
.plazart-mainnav .navbar .nav > li:hover > a:before{
background:#5fa9a9 !important;
}
     .box.style1 .TzNew_PortfolioTitle .TzNewReadmoreLink,
     .box .twitter-inline .twitter-flow,
     .skill-block .progress .bar,
     .box li.sb-media-skin .author_information,
     .box.style1 .tz_new_grid_content .image-hover{
        background:#5fa9a9 !important;
     }
     #tztwd-tweets a,
     .box li.sb-media-skin .author_social a i{
     color:#5fa9a9 !important;
     }
     .box.style1 .tz_new_grid_content .image-hover{
        opacity:0.3;
     }

     header.tz-header > div.container-fluid{
     background:rgba(9, 12, 24, 0.8) !important;
     }

     .tz-bottom div.container-fluid,
     .tz-bottom div.tz-inner,
     .tz-bottom div.row-fluid{
     background:#3d3d3d !important;
     }

     .footer-bottom div.container-fluid,
      .footer-bottom div.tz-inner,
       .footer-bottom div.row-fluid{
     background:#1f1f1f !important;
     }
    
    body{
        background-color:#232323;
    }
    
    body{
        background-image:url(http://demo.templaza.com/j/responsive/images/1.jpg);
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
    }
    
#tztwd-tweets a {color: #5fa9a9}#tztwd-container {background-color: #ffffff}#tztwd-header {border-bottom-color: transparent}#tztwd-container {border-color: transparent}.tztwd-copyright {border-top-color: transparent}.tztwd-tweet-container {border-bottom-color: transparent}#tztwd {color: #333333}a .tztwd-display-name {color: #333333}a .tztwd-screen-name {color: #999999}a:hover .tztwd-screen-name {color: #666666}#tztwd-header, #tztwd-header a {color: #333333}
  </style>
<section class="tz-headline" style="margin-top: -87px; min-height: 87px;">
    <div class="container-fluid">
        <div class="tz-inner">
            <div class="box ">
                <div>
                    <div class="content">

                        <div class="custom" style="background-image: url(/Content/Home_files/7285085508_d4207ca9cd_h.jpg)">
                            <p>Header page</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box breadcrumb">
                <div>
                    <div class="content">
                        <ul class="breadcrumb breadcrumb">
                            <li><a href="http://demo.templaza.com/j/responsive/" class="pathway">Home Page</a></li>
                            <li></li>
                            <li><span class="divider">/</span><span>Gallery</span></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="tz-main">
    <section class="tz-main-body">
        <div class="container-fluid">
            <div class="tz-inner">

                <section class="tz-content-wrap row-fluid">


                    <section id="tz-content" class=" span12 ">





                        <section id="tz-component" class="row-fluid">
                            <div class=" tz-inner-content span ">


                                <div id="PortfolioGallery">
                                    <div id="ib-main-wrapper" class="ib-main-wrapper kinetic-active" tabindex="0" style="cursor: move;">
                                        <div class="ib-main" style="width: 1792px;">
                                            <a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/aliquam-id-viverra-mi/34">
                                                <img src="/Content/Gallery_files/5214abd221ba7tz_portfolio_1377086418_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214abd221ba7tz_portfolio_1377086418_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Aliquam id viverra mi</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/sed-laoreet-consectetur/35">
                                                <img src="/Content/Gallery_files/5214abead2e8ftz_portfolio_1377086442_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214abead2e8ftz_portfolio_1377086442_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Sed laoreet consectetur</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/lorem-ipsum-dolor-sit/36">
                                                <img src="/Content/Gallery_files/5214ac018f22dtz_portfolio_1377086465_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214ac018f22dtz_portfolio_1377086465_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Lorem ipsum dolor sit</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/nullam-ac-diam-lacinia/37">
                                                <img src="/Content/Gallery_files/5214ac14daf66tz_portfolio_1377086484_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214ac14daf66tz_portfolio_1377086484_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Nullam ac diam lacinia</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/aenean-sodales-pharetra/38">
                                                <img src="/Content/Gallery_files/5214ac2928a6dtz_portfolio_1377086505_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214ac2928a6dtz_portfolio_1377086505_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Aenean sodales pharetra</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/donec-semper-at-felis/39">
                                                <img src="/Content/Gallery_files/5214ac4172ad7tz_portfolio_1377086529_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214ac4172ad7tz_portfolio_1377086529_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Donec semper at felis</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/donec-eleifend-lectus/40">
                                                <img src="/Content/Gallery_files/5214ad7496b77tz_portfolio_1377086836_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214ad7496b77tz_portfolio_1377086836_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Donec eleifend lectus</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/praesent-pulvinar-pretium/41">
                                                <img src="/Content/Gallery_files/5214ad89dc396tz_portfolio_1377086857_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/5214ad89dc396tz_portfolio_1377086857_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Praesent pulvinar pretium</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/nulla-tellus-enim/42">
                                                <img src="/Content/Gallery_files/nulla-tellus-enim-42_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/nulla-tellus-enim-42_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Nulla tellus enim</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/aenean-vitae-nulla-leo/49">
                                                <img src="/Content/Gallery_files/aenean-vitae-nulla-leo-49_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/aenean-vitae-nulla-leo-49_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Aenean vitae nulla leo</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/morbi-ullamcorper-mi-nisi/50">
                                                <img src="/Content/Gallery_files/morbi-ullamcorper-mi-nisi-50_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/morbi-ullamcorper-mi-nisi-50_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Morbi ullamcorper mi nisi</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/praesent-molestie-at-est-sed/51">
                                                <img src="/Content/Gallery_files/praesent-molestie-at-est-sed-51_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/praesent-molestie-at-est-sed-51_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Praesent molestie at est sed</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/nunc-quis-congue-leo/52">
                                                <img src="/Content/Gallery_files/nunc-quis-congue-leo-52_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/nunc-quis-congue-leo-52_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Nunc quis congue leo</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/quisque-vehicula-sem/53">
                                                <img src="/Content/Gallery_files/quisque-vehicula-sem-53_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/quisque-vehicula-sem-53_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Quisque vehicula sem</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/aliquam-aliquam-risus-placerat/54">
                                                <img src="/Content/Gallery_files/aliquam-aliquam-risus-placerat-54_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/aliquam-aliquam-risus-placerat-54_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Aliquam aliquam risus placerat</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/pellentesque-ac-ultrices-sem/55">
                                                <img src="/Content/Gallery_files/pellentesque-ac-ultrices-sem-55_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/pellentesque-ac-ultrices-sem-55_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Pellentesque ac ultrices sem</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/quisque-vehicula-ipsum-vel/56">
                                                <img src="/Content/Gallery_files/quisque-vehicula-ipsum-vel-56_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/quisque-vehicula-ipsum-vel-56_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Quisque vehicula ipsum vel</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/vivamus-at-dui-vel-sapien/57">
                                                <img src="/Content/Gallery_files/vivamus-at-dui-vel-sapien-57_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/vivamus-at-dui-vel-sapien-57_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Vivamus at dui vel sapien</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/curabitur-nec-elit-id-purus/58">
                                                <img src="/Content/Gallery_files/curabitur-nec-elit-id-purus-58_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/curabitur-nec-elit-id-purus-58_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Curabitur nec elit id purus</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/praesent-in-mattis-turpis/59">
                                                <img src="/Content/Gallery_files/praesent-in-mattis-turpis-59_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/praesent-in-mattis-turpis-59_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Praesent in mattis turpis</span>
                                                </div>


                                            </a><a class="ib-image" href="http://demo.templaza.com/j/responsive/index.php/blog/blog-sidebar/item/11-news/aliquam-ut-sapien-sodales/60">
                                                <img src="/Content/Gallery_files/aliquam-ut-sapien-sodales-60_M.jpg" data-largesrc="http://demo.templaza.com/j/responsive/media/tz_portfolio/article/cache/aliquam-ut-sapien-sodales-60_XL.jpg" alt="" title="">
                                                <div class="ib-inner">
                                                    <span>Aliquam ut sapien sodales</span>
                                                </div>


                                            </a>
                                            <div class="clr"></div>
                                        </div>
                                        <!-- ib-main -->
                                    </div>
                                    <!-- ib-main-wrapper -->
                                </div>

                                <script type="text/javascript">
                                    jQuery(function () {
                                        var $gallery_type = "fullimage";
                                        var $ibWrapper = jQuery('#ib-main-wrapper'),

                                            Template = (function () {

                                                // true if dragging the container
                                                var kinetic_moving = false,
                                                    // current index of the opened item
                                                    current = -1,
                                                    // true if the item is being opened / closed
                                                    isAnimating = false,
                                                    // items on the grid
                                                    $ibItems = $ibWrapper.find('div.ib-main > a'),
                                                    // image items on the grid
                                                    $ibImgItems = $ibItems.not('.ib-content'),
                                                    // total image items on the grid
                                                    imgItemsCount = $ibImgItems.length,
                                                    init = function () {

                                                        // add a class ib-image to the image items
                                                        $ibImgItems.addClass('ib-image');
                                                        // apply the kinetic plugin to the wrapper
                                                        loadKinetic();
                                                        // load some events
                                                        initEvents();

                                                    },
                                                    loadKinetic = function () {

                                                        if (typeof setWrapperSize == 'function') {
                                                            setWrapperSize();
                                                        }

                                                        $ibWrapper.kinetic({
                                                            moved: function () {

                                                                kinetic_moving = true;

                                                            },
                                                            stopped: function () {

                                                                kinetic_moving = false;

                                                            }
                                                        });

                                                    }/*,
                        setWrapperSize				= function() {

                            var containerMargins	= jQuery('#ib-top').outerHeight(true) +
                                    jQuery('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
                            if(containerMargins == 0){
                                containerMargins    = 'auto';
                            }
                            $ibWrapper.css( 'height', containerMargins);

                        }*/,
                                                    initEvents = function () {

                                                        // open the item only if not dragging the container
                                                        $ibItems.bind('click.ibTemplate', function (event) {

                                                            if (!kinetic_moving)
                                                                openItem(jQuery(this));

                                                            return false;

                                                        });

                                                        // on window resize, set the wrapper and preview size accordingly
                                                        jQuery(window).bind('resize.ibTemplate', function (event) {

                                                            if (typeof setWrapperSize == 'function') {
                                                                setWrapperSize();
                                                            }

                                                            jQuery('#ib-img-preview, #ib-content-preview').css({
                                                                width: jQuery(window).width(),
                                                                height: jQuery(window).height()
                                                            })

                                                        });

                                                    },
                                                    openItem = function ($row) {

                                                        if (isAnimating) return false;

                                                        // if content item
                                                        if ($row.hasClass('ib-content')) {

                                                            isAnimating = true;
                                                            current = $row.index('.ib-content');
                                                            loadContentItem($row, function () { isAnimating = false; });

                                                        }
                                                            // if image item
                                                        else {

                                                            isAnimating = true;
                                                            current = $row.index('.ib-image');
                                                            loadImgPreview($row, function () { isAnimating = false; });

                                                        }

                                                    },
                                                    // opens one image item (fullscreen)
                                                    loadImgPreview = function ($row, callback) {

                                                        var largeSrc = $row.children('img').data('largesrc'),
                                                            description = $row.children('span').text(),
                                                            largeImageData = {
                                                                src: largeSrc,
                                                                description: description
                                                            };

                                                        // preload large image
                                                        $row.addClass('ib-loading');

                                                        preloadImage(largeSrc, function () {

                                                            $row.removeClass('ib-loading');

                                                            var hasImgPreview = (jQuery('#ib-img-preview').length > 0);

                                                            if (!hasImgPreview) {
                                                                //                                jQuery('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );

                                                                jQuery('body').append(jQuery('#previewTmpl').tmpl(largeImageData));


                                                            }
                                                            jQuery('#ib-img-preview').children('img.ib-preview-img')
                                                                                .attr('src', largeSrc)
                                                                                .end()
                                                                                .find('span.ib-preview-descr')
                                                                                .text(description);

                                                            //Disabled scrollbar
                                                            jQuery('body').css('overflow', 'hidden');

                                                            jQuery('#ib-top').insertBefore(jQuery('#ib-img-preview')).css({ position: 'fixed', top: 0 });

                                                            //get dimentions for the image, based on the windows size
                                                            var dim = getImageDim(largeSrc);

                                                            $row.removeClass('ib-img-loading');

                                                            //set the returned values and show/animate preview
                                                            jQuery('#ib-img-preview').css({
                                                                width: $row.width(),
                                                                height: $row.height(),
                                                                left: $row.offset().left,
                                                                top: $row.offset().top - jQuery(window).scrollTop()
                                                            }).children('img.ib-preview-img').hide().css({
                                                                width: dim.width,
                                                                height: dim.height,
                                                                left: dim.left,
                                                                top: dim.top
                                                            }).fadeIn(400).end().show().animate({
                                                                width: jQuery(window).width(),
                                                                left: 0
                                                            }, 500, 'easeOutExpo', function () {

                                                                jQuery(this).animate({
                                                                    height: jQuery(window).height(),
                                                                    top: 0
                                                                }, 400, function () {

                                                                    var $this = jQuery(this);
                                                                    $this.find('span.ib-preview-descr, span.ib-close').show()
                                                                    if (imgItemsCount > 1)
                                                                        $this.find('div.ib-nav').show();

                                                                    if (callback) callback.call();

                                                                });

                                                            });

                                                            if (!hasImgPreview)
                                                                initImgPreviewEvents();

                                                        });

                                                    },
                                                    // opens one content item (fullscreen)
                                                    loadContentItem = function ($row, callback) {

                                                        var hasContentPreview = (jQuery('#ib-content-preview').length > 0),
                                                            teaser = $row.children('div.ib-teaser').html(),
                                                            content = $row.children('div.ib-content-full').html(),
                                                            contentData = {
                                                                teaser: teaser,
                                                                content: content
                                                            };

                                                        if (!hasContentPreview) {
                                                            //                            jQuery('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );
                                                            jQuery('body').append(jQuery('#contentTmpl').tmpl(contentData));
                                                        }

                                                        //Disabled scrollbar
                                                        jQuery('body').css('overflow', 'hidden');

                                                        jQuery('#ib-top').insertBefore(jQuery('#ib-content-preview')).css({ position: 'fixed', top: 0 });

                                                        //set the returned values and show/animate preview
                                                        jQuery('#ib-content-preview').css({
                                                            width: $row.width(),
                                                            height: $row.height(),
                                                            left: $row.offset().left,
                                                            top: $row.offset().top - jQuery(window).scrollTop()
                                                        }).show().animate({
                                                            width: jQuery(window).width(),
                                                            left: 0
                                                        }, 500, 'easeOutExpo', function () {

                                                            jQuery(this).animate({
                                                                height: jQuery(window).height(),
                                                                top: 0
                                                            }, 400, function () {

                                                                var $this = jQuery(this),
                                                                    $teaser = $this.find('div.ib-teaser'),
                                                                    $content = $this.find('div.ib-content-full'),
                                                                    $close = $this.find('span.ib-close');

                                                                if (hasContentPreview) {
                                                                    $teaser.html(teaser)
                                                                    $content.html(content)
                                                                }

                                                                $teaser.show();
                                                                $content.show();
                                                                $close.show();

                                                                if (callback) callback.call();

                                                            });

                                                        });

                                                        if (!hasContentPreview)
                                                            initContentPreviewEvents();

                                                    },
                                                    // preloads an image
                                                    preloadImage = function (src, callback) {

                                                        jQuery('<img/>').load(function () {

                                                            if (callback) callback.call();

                                                        }).attr('src', src);

                                                    },
                                                    // load the events for the image preview : navigation ,close button, and window resize
                                                    initImgPreviewEvents = function () {

                                                        var $preview = jQuery('#ib-img-preview');

                                                        $preview.find('span.ib-nav-prev').bind('click.ibTemplate', function (event) {

                                                            navigate('prev');

                                                        }).end().find('span.ib-nav-next').bind('click.ibTemplate', function (event) {

                                                            navigate('next');

                                                        }).end().find('span.ib-close').bind('click.ibTemplate', function (event) {

                                                            closeImgPreview();

                                                        });

                                                        //resizing the window resizes the preview image
                                                        jQuery(window).bind('resize.ibTemplate', function (event) {

                                                            var $largeImg = $preview.children('img.ib-preview-img'),
                                                                dim = getImageDim($largeImg.attr('src'));

                                                            $largeImg.css({
                                                                width: dim.width,
                                                                height: dim.height,
                                                                left: dim.left,
                                                                top: dim.top
                                                            })

                                                        });

                                                    },
                                                    // load the events for the content preview : close button
                                                    initContentPreviewEvents = function () {

                                                        jQuery('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function (event) {

                                                            closeContentPreview();

                                                        });

                                                    },
                                                    // navigate the image items in fullscreen mode
                                                    navigate = function (dir) {

                                                        if (isAnimating) return false;

                                                        isAnimating = true;

                                                        var $preview = jQuery('#ib-img-preview'),
                                                            $loading = $preview.find('div.ib-loading-large');

                                                        $loading.show();

                                                        if (dir === 'next') {

                                                            (current === imgItemsCount - 1) ? current = 0 : ++current;

                                                        }
                                                        else if (dir === 'prev') {

                                                            (current === 0) ? current = imgItemsCount - 1 : --current;

                                                        }

                                                        var $row = $ibImgItems.eq(current),
                                                            largeSrc = $row.children('img').data('largesrc'),
                                                            description = $row.children('span').text();

                                                        preloadImage(largeSrc, function () {

                                                            $loading.hide();

                                                            //get dimentions for the image, based on the windows size
                                                            var dim = getImageDim(largeSrc);

                                                            $preview.children('img.ib-preview-img')
                                                                            .attr('src', largeSrc)
                                                                            .css({
                                                                                width: dim.width,
                                                                                height: dim.height,
                                                                                left: dim.left,
                                                                                top: dim.top
                                                                            })
                                                                            .end()
                                                                            .find('span.ib-preview-descr')
                                                                            .text(description);

                                                            $ibWrapper.scrollTop($row.offset().top)
                                                                      .scrollLeft($row.offset().left);

                                                            isAnimating = false;

                                                        });

                                                    },
                                                    // closes the fullscreen image item
                                                    closeImgPreview = function () {

                                                        jQuery('#ib-top').insertBefore(jQuery('#ib-main-wrapper')).removeAttr('style');
                                                        if (isAnimating) return false;

                                                        isAnimating = true;

                                                        var $row = $ibImgItems.eq(current);

                                                        jQuery('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
                                                            .hide()
                                                            .end()
                                                            .animate({
                                                                height: $row.height(),
                                                                top: $row.offset().top - jQuery(window).scrollTop()
                                                            }, 500, 'easeOutExpo', function () {

                                                                jQuery(this).animate({
                                                                    width: $row.width(),
                                                                    left: $row.offset().left
                                                                }, 400, function () {

                                                                    jQuery(this).fadeOut(function () { isAnimating = false; });
                                                                    //Enabled scrollbar
                                                                    jQuery('body').css('overflow', '');

                                                                });
                                                            });



                                                    },
                                                    // closes the fullscreen content item
                                                    closeContentPreview = function () {

                                                        jQuery('#ib-top').insertBefore(jQuery('#ib-main-wrapper')).removeAttr('style');
                                                        if (isAnimating) return false;

                                                        isAnimating = true;

                                                        var $row = $ibItems.not('.ib-image').eq(current);

                                                        jQuery('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
                                                                                .hide()
                                                                                .end()
                                                                                .animate({
                                                                                    height: $row.height(),
                                                                                    top: $row.offset().top - jQuery(window).scrollTop()
                                                                                }, 500, 'easeOutExpo', function () {

                                                                                    jQuery(this).animate({
                                                                                        width: $row.width(),
                                                                                        left: $row.offset().left
                                                                                    }, 400, function () {

                                                                                        jQuery(this).fadeOut(function () { isAnimating = false; });
                                                                                        //Enabled scrollbar
                                                                                        jQuery('body').css('overflow', '');

                                                                                    });

                                                                                });

                                                    },
                                                    // get the size of one image to make it full size and centered
                                                    getImageDim = function (src) {

                                                        var img = new Image();
                                                        img.src = src;

                                                        var w_w = jQuery(window).width(),
                                                            w_h = jQuery(window).height(),
                                                            r_w = w_h / w_w,
                                                            i_w = img.width,
                                                            i_h = img.height,
                                                            r_i = i_h / i_w,
                                                            new_w, new_h,
                                                            new_left, new_top;

                                                        if (r_w > r_i) {
                                                            if ($gallery_type == 'fullscreen') {
                                                                new_h = w_h;
                                                                new_w = w_h / r_i;
                                                            }
                                                            if ($gallery_type == 'fullimage') {
                                                                new_h = w_w * r_i;
                                                                new_w = w_w;
                                                            }

                                                        }
                                                        else {
                                                            if ($gallery_type == 'fullscreen') {
                                                                new_h = w_w * r_i;
                                                                new_w = w_w;
                                                            }
                                                            if ($gallery_type == 'fullimage') {
                                                                new_h = w_h;
                                                                new_w = w_h / r_i;
                                                            }

                                                        }

                                                        return {
                                                            width: new_w,
                                                            height: new_h,
                                                            left: (w_w - new_w) / 2,
                                                            top: (w_h - new_h) / 2
                                                        };

                                                    };

                                                return { init: init };

                                            })();

                                        Template.init();

                                    });
    </script>


                            </div>



                        </section>

                    </section>



                    <div class="clr"></div>
                </section>

            </div>
        </div>
    </section>
</section>

